<!-- 预览时,生成不同类型表单 -->
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div v-if="widget.options.show == true">
    <div v-if="parentContainer">
      <!-- 显示名称 -->
      <el-form-item
        v-if="widget.type != 'block' && widget.type != 'tabs'"
        :label="getLable(widget)"
        :style="widget.options.customStyle"
        :prop="widget.model"
        :rules="widget.rules"
        :class="{
          is_req: widget.options.required,
          display: 'block',
          [widget.options.customClass]: widget.options.customClass
            ? true
            : false
        }"
      >
        <generate-element-item
          :strutAll="strutAll"
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          v-model="dataModel"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-element-item>
      </el-form-item>

      <div
        v-else-if="widget.type == 'block'"
        :label="getLable(widget)"
        :prop="widget.model"
        class="block-show"
      >
        <!--        区域块标题-->
        <span class="title">{{
          widget.options.showTitle ? widget.name : ""
        }}</span>
        <generate-element-item
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          :strutAll="strutAll"
          v-model="dataModel"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-element-item>
      </div>

      <div
        v-else-if="widget.type == 'card'"
        :label="getLable(widget)"
        :prop="widget.model"
        class="block-show"
      >
        <!--        卡片标题-->
        <span class="title">{{
          widget.options.showTitle ? widget.name : ""
        }}</span>
        <generate-element-item
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          :strutAll="strutAll"
          v-model="dataModel"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-element-item>
      </div>

      <div
        v-else-if="widget.type == 'tabs'"
        :label="getLable(widget)"
        :prop="widget.model"
        class="block-show"
      >
        <!--        tabs块标题-->
        <span class="title">{{
          widget.options.showTitle ? widget.name : ""
        }}</span>
        <generate-element-item
          :blanks="blanks"
          :widget="widget"
          :models_temp="models_temp"
          :strutAll="strutAll"
          v-model="dataModel"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-element-item>
      </div>
      <div
        v-else-if="widget.type == 'collapse'"
        :label="getLable(widget)"
        :prop="widget.model"
        class="block-show"
      >
        <!--        折叠面板标题-->
        <span class="title">{{
          widget.options.showTitle ? widget.name : ""
        }}</span>
        <generate-element-item
          :blanks="blanks"
          :widget="widget"
          :models_temp="models_temp"
          :strutAll="strutAll"
          v-model="dataModel"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-slot:[blank.name]="scope" v-for="blank in blanks">
            <slot :name="blank.name" :model="scope.model"></slot>
          </template>
        </generate-element-item>
      </div>
    </div>
    <div v-else>
      <el-col :span="widget.options.span">
        <!-- 显示名称 -->

        <el-form-item
          v-if="widget.type != 'block' && widget.type != 'tabs'"
          :label="getLable(widget)"
          :style="widget.options.customStyle"
          :prop="widget.model"
          :rules="widget.rules"
          :class="{
            is_req: widget.options.required,
            is_req: widget.options.required,
            display: 'block',
            [widget.options.customClass]: widget.options.customClass
              ? true
              : false
          }"
        >
          <generate-element-item
            :strutAll="strutAll"
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            v-model="dataModel"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-slot:[blank.name]="scope" v-for="blank in blanks">
              <slot :name="blank.name" :model="scope.model"></slot>
            </template>
          </generate-element-item>
        </el-form-item>

        <div
          v-else-if="widget.type == 'block'"
          :label="getLable(widget)"
          :prop="widget.model"
          class="block-show"
        >
          <!--        区域块标题-->
          <span class="title">{{
            widget.options.showTitle ? widget.name : ""
          }}</span>
          <generate-element-item
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            :strutAll="strutAll"
            v-model="dataModel"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-slot:[blank.name]="scope" v-for="blank in blanks">
              <slot :name="blank.name" :model="scope.model"></slot>
            </template>
          </generate-element-item>
        </div>

        <div
          v-else-if="widget.type == 'card'"
          :label="getLable(widget)"
          :prop="widget.model"
          class="block-show"
        >
          <!--        卡片标题-->
          <span class="title">{{
            widget.options.showTitle ? widget.name : ""
          }}</span>
          <generate-element-item
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            :strutAll="strutAll"
            v-model="dataModel"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-slot:[blank.name]="scope" v-for="blank in blanks">
              <slot :name="blank.name" :model="scope.model"></slot>
            </template>
          </generate-element-item>
        </div>

        <div
          v-else-if="widget.type == 'tabs'"
          :label="getLable(widget)"
          :prop="widget.model"
          class="block-show"
        >
          <!--        tabs块标题-->
          <span class="title">{{
            widget.options.showTitle ? widget.name : ""
          }}</span>
          <generate-element-item
            :blanks="blanks"
            :widget="widget"
            :models_temp="models_temp"
            :strutAll="strutAll"
            v-model="dataModel"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-slot:[blank.name]="scope" v-for="blank in blanks">
              <slot :name="blank.name" :model="scope.model"></slot>
            </template>
          </generate-element-item>
        </div>
        <div
          v-else-if="widget.type == 'collapse'"
          :label="getLable(widget)"
          :prop="widget.model"
          class="block-show"
        >
          <!--        折叠面板标题-->
          <span class="title">{{
            widget.options.showTitle ? widget.name : ""
          }}</span>
          <generate-element-item
            :blanks="blanks"
            :widget="widget"
            :models_temp="models_temp"
            :strutAll="strutAll"
            v-model="dataModel"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-slot:[blank.name]="scope" v-for="blank in blanks">
              <slot :name="blank.name" :model="scope.model"></slot>
            </template>
          </generate-element-item>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import GenerateElementItem from "./GenerateElementItem";
import {
  getAllControls,
  findTableColumnControls,
  findTableColumns
} from "./router/utils.js";
import {
  validatePhone,
  validateIdNo,
  validateEMail,
  validateURL,
  validatePwd,
  validateDate,
  validateReg
} from "./validate.js";
import { getLable } from "./js/formUtils.js";

import { verification } from "./router/verification.js";

export default {
  components: {
    GenerateElementItem
  },
  props: [
    "widget",
    "models",
    "rules",
    "remote",
    "blanks",
    "models_temp",
    "strutAll",
    "path",
    "index",
    "parentContainer"
  ],
  created() {},
  data() {
    return {
      dataModel:
        this.models[this.widget.model] == null
          ? ""
          : this.models[this.widget.model],
      dataModels: this.models == null ? "" : this.models
    };
  },
  mounted() {
    if (this.widget.tableColumns) {
      var tableColumns = this.widget.tableColumns;

      for (var i = 0; i < tableColumns.length; i++) {
        var widgetNode = tableColumns[i];
        if (widgetNode.rules) {
          for (var j = 0; j < widgetNode.rules.length; j++) {
            widgetNode.rules[j].validator = this.validatePass;
          }
        }
      }
    }
    if (this.widget.tabColumns) {
      var tableColumns = this.widget.tabColumns;

      for (var i = 0; i < tableColumns.length; i++) {
        var widgetNode = tableColumns[i];
        if (widgetNode.rules) {
          for (var j = 0; j < widgetNode.rules.length; j++) {
            widgetNode.rules[j].validator = this.validatePass;
          }
        }
      }
    }
    //VUE 嵌套的 手工赋值下 要不不生效
    if (this.widget.rules) {
      var rules = this.widget.rules;
      for (let i = 0; i < rules.length; i++) {
        rules[i].validator = this.validatePass;
      }
    }
  },
  methods: {
    getLable: function(element) {
      return getLable(element);
    },
    addBlockItem() {
      alert(1);
    },
    getClass(data) {
      var isRed = data.options.showRed;
      if (isRed) {
        return "vvvv";
      }
    },

    validatePass(rule, info, callback) {
      var type = rule.customerType;
      var length = rule.val;
      if (type == "nonull" && info.length == 0) {
        callback(new Error(rule.msg));
      } else if (type == "isnum" && !/^[0-9]*$/.test(info) && info.length > 0) {
        callback(new Error(rule.msg));
      } else if (type == "min" && info.length < length) {
        callback(new Error(rule.msg));
      } else if (type == "max" && info.length > length) {
        callback(new Error(rule.msg));
      } else if (type == "phone" && info.length > 0 && !validatePhone(info)) {
        callback(new Error(rule.msg));
      } else if (type == "idNumber" && info.length > 0 && !validateIdNo(info)) {
        callback(new Error(rule.msg));
      } else if (type == "email" && info.length > 0 && !validateEMail(info)) {
        callback(new Error(rule.msg));
      } else if (type == "url" && info.length > 0 && !validateURL(info)) {
        callback(new Error(rule.msg));
      } else if (type == "pwd" && info.length > 0 && !validatePwd(info)) {
        callback(new Error(rule.msg));
      } else if (type == "date" && info.length > 0 && !validateDate(info)) {
        callback(new Error(rule.msg));
      }
      //regular
      else if (
        type == "regular" &&
        info.length > 0 &&
        !validateReg(length, info)
      ) {
        callback(new Error(rule.msg));
      } else if (type == "dateRule") {
        var currentVal = this.models[this.widget.model];
        var otherVal = this.models[this.widget.options.ckeckedDatevalidType];
        if (currentVal && otherVal) {
          var dateValidRule = this.widget.options.dateValidRule;
          var otherName = "";
          var operateName = "";
          if (!otherVal) {
            callback();
          }
          if (dateValidRule) {
            var strutAll = this.strutAll;
            var list = strutAll.list;
            var otherNodes = [];
            for (var i = 0; i < list.length; i++) {
              var node = list[i];
              if (node.model == this.widget.options.ckeckedDatevalidType) {
                otherName = node.name;
              }
            }

            var dateValidRuleResult = false;
            if (">=" == dateValidRule) {
              operateName = "大于等于";
              dateValidRuleResult = currentVal - otherVal >= 0;
            } else if ("<" == dateValidRule) {
              operateName = "小于";
              dateValidRuleResult = currentVal - otherVal < 0;
            } else if ("==" == dateValidRule) {
              operateName = "等于";
              dateValidRuleResult = currentVal - otherVal == 0;
            } else if ("<=" == dateValidRule) {
              operateName = "小于等于";
              dateValidRuleResult = currentVal - otherVal <= 0;
            }
            if (!dateValidRuleResult) {
              callback(
                new Error("当前日期应该" + operateName + otherName + "的日期")
              );
            } else {
              callback();
            }
          }
        } else {
          var field = rule.field;
          var pathDot = rule.field.split(".");
          if (pathDot) {
            var blockId = pathDot[0];
            var index = pathDot[1];
            var modelId = pathDot[2];
            var node = currentVal[index];
            var operateName = "";
            var subNodes = findTableColumns(this.strutAll.list, modelId);
            if (subNodes) {
              for (var i = 0; i < subNodes.length; i++) {
                if (subNodes[i].model == modelId) {
                  var subNode = subNodes[i];

                  var ckeckedDatevalidType =
                    subNode.options.ckeckedDatevalidType;
                  var dateValidRule = subNode.options.dateValidRule;
                  var others = findTableColumns(
                    this.strutAll.list,
                    ckeckedDatevalidType
                  );
                  for (var j = 0; j < others.length; j++) {
                    if (others[j].model == ckeckedDatevalidType) {
                      otherName = others[j].name;
                    }
                  }

                  var otherVal = this.dataModel[index][ckeckedDatevalidType];
                  if (otherVal) {
                  }
                  var dateValidRuleResult = false;
                  if (">=" == dateValidRule) {
                    operateName = "大于等于";
                    dateValidRuleResult = info - otherVal >= 0;
                  } else if ("<" == dateValidRule) {
                    operateName = "小于";
                    dateValidRuleResult = info - otherVal < 0;
                  } else if ("==" == dateValidRule) {
                    operateName = "等于";
                    dateValidRuleResult = info - otherVal == 0;
                  } else if ("<=" == dateValidRule) {
                    operateName = "小于等于";
                    dateValidRuleResult = info - otherVal <= 0;
                  }
                  if (!dateValidRuleResult) {
                    callback(
                      new Error(
                        "当前日期应该" + operateName + otherName + "的日期"
                      )
                    );
                  } else {
                    callback();
                  }
                }
              }
            }
          }
        }
      } else if (rule.isregexp && !/^[^%'"?!^#%*/]*$/.test(info)) {
        callback(new Error(rule.msg));
      } else if (rule.isnumeng_ && !/^[0-9a-zA-Z_]*$/.test(info.value)) {
        callback(new Error(rule.msg));
      } else if (
        rule.maxlength &&
        !info.value === "" &&
        info.value.length > rule.maxlength
      ) {
        callback(new Error(rule.msg));
      } else {
        callback();
      }
    }
  },
  watch: {
    dataModel: {
      deep: true,
      immediate: true,
      handler(val) {
        try {
          this.models[this.widget.model] = val;
          this.$emit("update:models", {
            ...this.models,
            [this.widget.model]: val
          });
        } catch (e) {}
      }
    },
    models: {
      deep: true,
      handler(val) {
        try {
          this.dataModel = val[this.widget.model];
          this.dataModels = val; //改子表单和区域数据会造成最外层表单数据的改变
        } catch (e) {}
      }
    },
    dataModels: {
      deep: true,
      handler(val) {
        try {
          this.$emit("update:models", val);
        } catch (e) {}
      }
    }
  }
};
</script>
<style>
.block-h3 {
  padding-left: 0px;
  margin-bottom: 15px;
}
.block-show {
  margin-left: 5%;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
